<template>
  <div>
    <p>当前count的值为{{ count }}</p>
    <p>数据处理后的值为{{ Powcount }}</p>
    <button @click="add">增加</button>
    <button @click="addWait">异步增加</button>
    <br />
    <input type="text" v-model.number="value" />
    <button @click="addn({ n: value })">增加指定值</button>
    <button @click="addnWait({ n: value })">异步增加指定值</button>
  </div>
</template>

<script>
//辅助函数
import { mapMutations, mapActions } from 'vuex'
// 使用辅助函数,辅助函数会将所有的对应配置中的所有函数或者数据全部取出,然后通过传入的数组决定取值
// 辅助函数获取值为对象,可以使用.执行或者使用解构解构出然后放到对应函数中触发
// 最好方法是直接使用"..."展开展开展开运算符直接在指定位置展开即可直接使用,如果需要传输参数,在触发发插值语法中直接输入即可,内部给予了处理
// 如果使用了命名空间,就需要在[]前添加参数"模块名"
export default {
  data() {
    return {
      value: '',
    }
  },
  mounted() {
    // console.log(this.$store.state.count.count)
  },
  computed: {
    // 一般,数据和预处理数据就使用computed计算属性监听
    count() {
      return this.$store.state.count.count
    },
    Powcount() {
      // 获取有命名空间的getters时,需要使用[]获取其属性,因为如果使用'.'的形式/会被解读成除号
      return this.$store.getters['count/countPow']
    },
    // ...mapState('count', ['count']),
  },
  methods: {
    // 异步或者同步修改函数就使用写在methods中
    add() {
      // 开启命名空间后当前仓库模块所有的函数和getters就会在函数名前增加一个 模块名/ 用于区分
      this.$store.commit('count/add')
    },
    //开启命名空间后在使用辅助函数时也要添加一个参数,为模块名
    // ...mapMutations('count', ['addn']),
    addn() {
      mapMutations(['addn']).addn()
    },
    ...mapActions('count', ['addWait', 'addnWait']),
  },
}
</script>

<style></style>
